<template>
    <el-dialog
        title="注册后台用户"
        :visible.sync="dialogVisible"
        width="25%"
        :close-on-click-modal="false"
    >
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="register('from')">注 册</el-button>
        </span>
        <el-form :model="regFrom" :rules="rules" ref="from">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="regFrom.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="regFrom.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPassword">
                <el-input type="password" v-model="regFrom.checkPassword" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<style scoped lang="scss">
</style>
<script>
import { fetchPost } from "../../http";
export default {
    props: {
        regFrom: {
            username: String,
            password: String,
            checkPassword: String,
            isSuccess: Boolean
        }
    },
    data() {
        var validatePass = (rule, value, callback) => {
            console.log(value);
            if (value === "" || !value) {
                callback(new Error("请输入密码"));
            } else {
                if (this.regFrom.checkPassword !== "") {
                    validatePass2(rule, value, callback);
                }
                this.regFrom.isSuccess = true;
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            console.log(value);
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.regFrom.password) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                this.regFrom.isSuccess = true;
                callback();
            }
        };
        return {
            rules: {
                password: [{ validator: validatePass, trigger: "blur" }],
                checkPassword: [{ validator: validatePass2, trigger: "blur" }],
                username: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 3 到 5 个字符",
                        trigger: "blur"
                    }
                ]
            },
            dialogVisible: false
        };
    },
    methods: {
        // 注册到服务器
        register(fromName) {
            this.$refs[fromName].validate(valid => {
                if (valid) {
                    if (this.regFrom.isSuccess) {
                        let user = {
                            username: this.regFrom.username,
                            password: this.regFrom.password
                        };
                        fetchPost("/backUser/register", user).then(() => {
                            this.$notify.success(
                                `${this.regFrom.username}注册成功`
                            );
                            this.dialogVisible = false;
                        });
                    } else {
                        this.$notify.warning("注册用户信息有误!");
                    }
                    
                }

            });
        },
        open() {
            this.dialogVisible = true;
        }
    }
};
</script>